import {useState} from "react";
import {View} from "@tarojs/components";

import "./index.scss"

const Tab: React.FC<{
    className?: string,
    change?: (tab: string) => void,
    tabs: {
        name: string,
        value: string,
        active?: boolean,
    }[]
}> = ({ tabs, className, change }) => {
    const activeItem = tabs.find(item => {
        return item.active
    }) || tabs[0]
    const [active, setActive] = useState<string>(activeItem.value);
    const clickType = (val: string) => {
        setActive(val)
        change && change(val)
    }
    return (<View className={`type-switch flex-row flex-item ${className || ''}`}>
        {
            tabs.map(item => {
                return (
                    <View onClick={() => clickType(item.value)}
                          className={`type-item ${active === item.value ? ' active' : ''}`}>
                        <View className="type-name">{item.name}</View>
                        <View className="bottom-line bg-contrast-color"></View>
                    </View>
                )
            })
        }
    </View>)
}

export default Tab